<page-header [title]="title">
  <ng-template #breadcrumb>
    <nz-breadcrumb>
      <nz-breadcrumb-item><a [routerLink]="['/pop/list']">{{'manage_single_pop'|translate}}</a></nz-breadcrumb-item>
      <nz-breadcrumb-item>{{'add-single-pop'|translate}}</nz-breadcrumb-item>
    </nz-breadcrumb>
  </ng-template>
  <ng-template #action><button nz-button (click)="back()"style="float: right"><i class="anticon anticon-rollback" style="font-size: 14px"></i>{{'goback'|translate}}</button></ng-template>
</page-header>
  <form nz-form>
    <nz-form-item>
      <nz-form-label nzSpan="2" nzRequired>{{'sap'|translate}}</nz-form-label>
      <nz-form-control nzSpan="4">
        <input nz-input [disabled]="isEdit" [(ngModel)]="popItem.sap" name="sap">
      </nz-form-control>
      <nz-form-label nzSpan="2" nzRequired>{{'sku_number'|translate}}</nz-form-label>
      <nz-form-control nzSpan="4">
        <input nz-input [disabled]="isEdit" [(ngModel)]="popItem.sku" name="sku">
      </nz-form-control>
      <nz-form-label nzSpan="2" nzRequired>EXW</nz-form-label>
      <nz-form-control nzSpan="4">
        <input nz-input [(ngModel)]="popItem.exw" name="exw" >
      </nz-form-control>
      <nz-form-label nzSpan="2">CIF</nz-form-label>
      <nz-form-control nzSpan="4">
        <input nz-input [(ngModel)]="popItem.cif" name="cif" >
      </nz-form-control>
      <!--<nz-form-label nzSpan="2">{{'description'|translate}}</nz-form-label>-->
      <!--<nz-form-control nzSpan="4">-->
        <!--<input nz-input [(ngModel)]="popItem.description" name="description" >-->
      <!--</nz-form-control>-->
      <!--<nz-form-label nzSpan="2">SAP名称</nz-form-label>-->
      <!--<nz-form-control nzSpan="4">-->
        <!--<input nz-input [(ngModel)]="popItem.sapDesc" name="sapDesc" >-->
      <!--</nz-form-control>-->
    </nz-form-item>
    <nz-form-item>

      <nz-form-label nzSpan="2" nzRequired>QTY</nz-form-label>
      <nz-form-control nzSpan="4">
        <input nz-input [(ngModel)]="popItem.qty" name="qty" >
      </nz-form-control>
      <nz-form-label nzSpan="2" nzRequired>{{'ctn_qty'|translate}}</nz-form-label>
      <nz-form-control nzSpan="4">
        <input nz-input [(ngModel)]="popItem.ctnQty" name="ctnQty" >
      </nz-form-control>
      <nz-form-label nzSpan="2">{{'gross_weight'|translate}}</nz-form-label>
      <nz-form-control nzSpan="4">
        <input nz-input [(ngModel)]="popItem.grossWeight" name="grossWeight" >
      </nz-form-control>
      <nz-form-label nzSpan="2">{{'net_weight'|translate}}</nz-form-label>
      <nz-form-control nzSpan="4">
        <input nz-input [(ngModel)]="popItem.netWeight" name="netWeight">
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzSpan="2">{{'material'|translate}}</nz-form-label>
      <nz-form-control nzSpan="4">
        <input nz-input [(ngModel)]="popItem.material" name="material" >
      </nz-form-control>
      <!--<nz-form-label nzSpan="2" nzRequired>{{'price_unit'|translate}}</nz-form-label>-->
      <!--<nz-form-control nzSpan="4">-->
        <!--<nz-select style="" [(ngModel)]="popItem.priceUnit" name="priceUnit" nzAllowClear  [nzPlaceHolder]="'请选择价格单位'">-->
          <!--<nz-option [nzLabel]="priceUnit.text" [nzValue]="priceUnit.value" *ngFor="let priceUnit of priceUnits"></nz-option>-->
        <!--</nz-select>-->
      <!--</nz-form-control>-->
      <nz-form-label nzSpan="2" nzRequired>{{'brand'|translate}}</nz-form-label>
      <nz-form-control nzSpan="4">
        <nz-select style="" [(ngModel)]="popItem.brand" name="brand" nzAllowClear nzShowSearch nzPlaceHolder="{{'please-select-brand'|translate}}">
          <nz-option [nzLabel]="brand.text" [nzValue]="brand.value" *ngFor="let brand of brands"></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzSpan="2">{{'img' | translate}}</nz-form-label>
      <nz-form-control nzSpan="3">
        <nz-upload class="avatar-uploader"
                   [nzAction]="uploadUrl"
                   nzName="avatar"
                   nzListType="picture-card"
                   [nzShowUploadList]="false"
                   [nzBeforeUpload]="beforeUpload"
                   (nzChange)="handleChange($event)">
          <ng-container *ngIf="!popItem.img">
            <i class="anticon anticon-plus"></i>
            <div class="ant-upload-text">Upload</div>
          </ng-container>
          <img *ngIf="popItem.img" [src]="imgSuffix+popItem.img" class="avatar">
          <!--<a><img *ngIf="popItem.img" [src]="imgSuffix + popItem.img" width="32px" style=" max-height: 32px;"/></a>-->
        </nz-upload>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzSpan="2">{{'is_on_sale' | translate}}</nz-form-label>
      <nz-form-control>
        <nz-switch name="salestatus" [(ngModel)]="salestatus" nzCheckedChildren="{{'on_sale'|translate}}" nzUnCheckedChildren="{{'off_sale'|translate}}"></nz-switch>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control nzSpan="2"></nz-form-control>
      <nz-form-control nzSpan="4">
      <button (click)="reset()" nz-button nzType="primary">{{'reset'|translate}}</button>
      <button (click)="save()" nz-button nzType="primary">{{'save'|translate}}</button>
      </nz-form-control>
    </nz-form-item>
  </form>
